<template>
    <div>
        <div>
            <div class="block">
                <span class="demonstration">发货地：</span>
                <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>
            </div>
            <div class="block">
                <span class="demonstration">收货地：</span>
                <el-cascader v-model="value1" :options="options" @change="handleChange1"></el-cascader>
            </div>
            <div class="time">
                <el-button @click="is_show = true">开始时间</el-button>
                <Calendar v-on:choseDay="clickDay" v-on:changeMonth="changeDate" v-if="is_show"></Calendar>
            </div>
            <div class="time">
                <el-button @click="is_show1 = true">结束时间</el-button>
                <Calendar v-on:choseDay="clickDay1" v-on:changeMonth="changeDate" v-if="is_show1"></Calendar>
            </div>
            <div class="button">
                <el-button @click="inquire">确定</el-button>
            </div>
        </div>
        <br /><br /><br />
        <div v-show="is_show2">
            <div class="card">
                <el-card class="box-card">
                    <div class="text item">最高温度：{{ max_tem }}</div>
                    <div class="text item">最低温度：{{ min_tem }}</div>
                    <div class="text item">
                        最长时长{{}}
                    </div>
                    <div class="text item">
                        最短时长：{{}}
                    </div>
                    <div class="text item">
                        平均时长：{{}}
                    </div>
                </el-card>
            </div>
            <br /><br />
            <!-- 地图 -->
            <div id="map-test" class="map-div"></div>
            <!-- 运单信息 -->
            <div class="div2">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>运单信息</span>
                    </div>
                    <div class="text item">运单号：{{ order_number }}</div>
                    <div class="text item">设备号：{{ equipment }}</div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
import { address, inquire } from '../../api/api';
// 导入日历组件
import Calendar from 'vue-calendar-component';
import { lazyAMapApiLoaderInstance } from 'vue-amap';
let id = 0;
export default {
    data() {
        let self = this;
        return {
            // 发货地
            value: '',
            // 收货地
            value1: '',
            // 地址信息列表
            options: [],
            // 开始时间
            start_time: '',
            // 结束时间
            end_time: '',
            // 是否展示开始时间日历
            is_show: false,
            // 是否展示结束时间日历
            is_show1: false,
            // 是否展示地图及温度信息
            is_show2: false,
            // 返回信息-最高温度
            max_tem: '',
            // 返回信息-最低温度
            min_tem: '',
            // 运单号
            order_number: '',
            // 设备号
            equipment: '',
            center: [
                //点标记的坐标
                {
                    position: []
                },
                {
                    position: []
                }
            ]
        };
    },
    methods: {
        // 获取所有收货地
        get_address() {
            address().then(res => {
                this.options = res.data.data;
            });
        },
        // 选择发货地
        handleChange(value) {
            this.value = value;
            // this.value = JSON.stringify(value);
        },
        // 选择收货地
        handleChange1(value) {
            this.value1 = value;
            // this.value1 = JSON.stringify(value);
        },
        // 选择开始时间
        clickDay(data) {
            this.$message('您已选择开始时间为' + data); //选中某天
            this.is_show = false;
            this.start_time = data;
        },
        // 选择结束时间
        clickDay1(data) {
            this.$message('您已选择结束时间为' + data); //选中某天
            this.end_time = data;
            this.is_show1 = false;
        },
        changeDate(data) {
            console.log(data); //左右点击切换月份
        },
        clickToday(data) {
            console.log(data); //跳到了本月
        },
        // 查询
        inquire() {
            if (this.value) {
                if (this.value1) {
                    if (this.start_time) {
                        if (this.end_time) {
                            inquire({
                                value: this.value,
                                value1: this.value1,
                                start_time: this.start_time,
                                end_time: this.end_time
                            }).then(res => {
                                console.log(res);
                                if (res.data.code == 200) {
                                    this.max_tem = res.data.max_tem;
                                    this.min_tem = res.data.min_tem;
                                    this.order_number = res.data.order_number;
                                    this.equipment = res.data.equipment;
                                    this.is_show2 = true;
                                    this.center[0].position = res.data.address_location;
                                    this.center[1].position = res.data.take_adress_location;
                                    console.log(this.center[1]);
                                    this.gaode_map();
                                } else {
                                    this.$message(res.data.msg);
                                }
                            });
                        } else {
                            this.$message('请选择结束时间');
                        }
                    } else {
                        this.$message('请选择开始时间');
                    }
                } else {
                    this.$message('请选择收货地');
                }
            } else {
                this.$message('请选择发货地');
            }
        },
        gaode_map() {
            lazyAMapApiLoaderInstance.load().then(() => {
                //map-test为div的id
                var map = new AMap.Map('map-test', {
                    center: new AMap.LngLat(116.397428, 39.90923) // 地图中心点
                });
                //点标记
                this.center.forEach(center => {
                    new AMap.Marker({
                        map: map, //放置点标记的地图
                        position: [center.position[0], center.position[1]],
                        title: '点标记'
                    }).on('click', function() {
                        alert('点击了标记');
                    });
                });
            });
        }
    },
    mounted: function() {
        this.get_address();
        this.gaode_map();
    },
    components: {
        Calendar
    }
};
</script>

<style>
.block {
    float: left;
    width: 300px;
}
.time {
    float: left;
    width: 250px;
}
.button {
    float: left;
}
.card {
    width: 100%;
}
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
    float: left;
    width: 20%;
}

.box-card {
    width: 100%;
}
.map-div {
    width: 50%;
    float: left;
}
#map-test {
    height: 600px;
}
.div2 {
    width: 50%;
    float: left;
}
</style>